For full control over the HTML structure of a shared page — beyond what custom CSS, JS, or HTML snippets allow — you can replace the page template entirely using the ~shareTemplate relation.

To do so:

  1. Create a Code note with the language Embedded JavaScript (EJS).
  2. For a shared note to apply the newly created template, apply the ~shareTemplaterelation pointing to the note created at step (1). Make use of Attribute Inheritance to apply it to multiple shared notes.

There are two important constraints to be aware of:

Content of the share template

Use the original template as reference when creating a new share template.

Available variables

Your template is rendered with a context object exposing the note and its rendering environment. The most useful values are:

Variable Description
note The note being rendered. Use it to read attributes (note.getLabelValue(...)), note.title, child notes, etc.
content The note's already-rendered HTML content, as a string.
header Extra HTML to place in the document head for this note (used by some note types).
isEmpty true when the note has no content of its own.
subRoot The root of the shared subtree as { note, branch } — handy for a site-wide title or logo.
cssToLoad / jsToLoad Arrays of stylesheet / script URLs the default theme would inject (includes anything added via ~shareCss / ~shareJs).
faviconUrl / logoUrl Resolved favicon and logo URLs.
isStatic true during a static HTML export, falsefor a live server render.
t The i18next translation function.
utils Helper utilities such as slugify() and stripTags().

Error handling

If your template throws an error while rendering, Trilium logs the error and quietly falls back to the default template, so a broken template never takes the shared page down.

Splitting a template into partials

A template can pull in other EJS notes as partials. Create them as child notes of the template note (each also a code / application/x-ejsnote) and reference them by title:

<%- include("header") %>

<main>
    <h1><%= note.title %></h1>
    <%- content %>
</main>

<%- include("footer") %>

Here header and footer are the titles of child notes of the template. Only direct children are resolvable, and they must be EJS code notes.